<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="80px" inline>
      <el-form-item label="工单编号">
        <el-input v-model="searchForm.productionOrderCode" placeholder="工单编号" clearable />
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="searchForm.productionOrderName" placeholder="工单名称" clearable />
      </el-form-item>
      <el-form-item label="单据来源">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderSource" placeholder="单据来源">
          <el-option label="客户订单" :value="1"/>
          <el-option label="库存备货" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input v-model="searchForm.material.code" placeholder="物料编号" clearable />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.material.name" placeholder="物料名称" clearable />
      </el-form-item>

      <el-form-item label="客户编号">
        <el-input v-model="searchForm.customer.code" placeholder="客户编号" clearable />
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customer.name" placeholder="客户名称" clearable />
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderType" placeholder="单据来源">
          <el-option
            v-for="dictData in productionOrderTypeDictDataList"
            :value="dictData.dictValue"
            :label="dictData.dictLabel"
            :key="dictData.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 120px;" v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dictData in productionOrderStatusDictDataList"
            :label="dictData.dictLabel"
            :value="dictData.dictValue"
            :key="dictData.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button x type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增工单</el-button>
  </div>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-table
        :data="productionOrderList"
        border
        stripe
        @selection-change="handleSelectionChange"
    >
      <el-table-column prop="productionOrderCode" label="工单编号">
        <template #default="scope">
          <el-link type="primary" @click="">{{scope.row.productionOrderCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderName" label="工单名称"/>
      <el-table-column prop="typeDictData.dictLabel" label="工单类型"/>
      <el-table-column prop="productionOrderSource" label="工单来源">
        <template #default="scope">
          {{scope.row.productionOrderSource == 1?'客户订单':'库存备货'}}
        </template>
      </el-table-column>
      <el-table-column prop="orderCode" label="订单编号"/>
      <el-table-column prop="material.code" label="产品/物料编号"/>
      <el-table-column prop="material.name" label="产品/物料名称"/>
      <el-table-column prop="material.specification" label="规格"/>
      <el-table-column prop="material.unit.name" label="单位"/>
      <el-table-column prop="productionOrderQuantity" label="工单数量"/>
      <el-table-column prop="productionOrderQuantity" label="已生产数量">
        {{0}}
      </el-table-column>
      <el-table-column prop="customer.code" label="客户编号"/>
      <el-table-column prop="customer.name" label="客户名称"/>
      <el-table-column prop="requestDate" label="需求日期"/>
      <el-table-column prop="statusDictData.dictLabel" label="状态">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 1" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              v-if="scope.row.statusDictData.dictValue == 1" size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
          <el-button size="small" v-if="scope.row.statusDictData.dictValue == 2" @click="handleReview(scope.row)">审核</el-button>
          <el-button size="small"  @click="">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页栏 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 其他弹窗 -->
  <!-- 增加弹窗 -->
  <el-dialog
    :title="dialogTitle"
    v-model="addOrUpdateDialogVisable"
    width="80%">
    <el-form v-model="productionOrderForm">
      <el-form-item label="工单编号">
        <el-input v-model="productionOrderForm.productionOrderCode"/>
        <el-switch
            @click="autoCode"
          v-model="isAutoCode"
          size="large"
          inline-prompt
          active-text="生成"
          inactive-text="生成"/>
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="productionOrderForm.productionOrderName"/>
      </el-form-item>
      <el-form-item label="来源类型">
        <el-radio-group v-model="productionOrderForm.productionOrderSource">
          <el-radio :label="1">客户订单</el-radio>
          <el-radio :label="2">库存备货</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 订单编号：仅当来源类型为客户订单（值为1）时显示 -->
      <el-form-item
          label="订单编号"
          prop="orderCode"
          v-if="productionOrderForm.productionOrderSource === 1">
        <el-input
            v-model="productionOrderForm.orderCode"
            placeholder="请输入订单编号"
            clearable/>
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select v-model="productionOrderForm.productionOrderType" placeholder="请选择工单类型">
          <el-option label="自产" :value="1" />
          <el-option label="外协" :value="2" />
          <el-option label="外购" :value="3" />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品物料编码">
            <el-input v-model="productionOrderForm.materialCode" placeholder="产品物料编码">
              <template #append>
                <el-button @click="showMaterialList"><el-icon><Search /></el-icon></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品物料名称">
            <el-input v-model="productionOrderForm.material.name" disabled placeholder="产品物料名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位">
            <el-input v-model="productionOrderForm.material.unit.name" disabled placeholder="单位"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="规格型号">
            <el-input type="textarea" v-model="productionOrderForm.material.specification" disabled placeholder=""/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="工单数量">
        <el-input v-model="productionOrderForm.productionOrderQuantity"/>
      </el-form-item>
      <el-form-item label="需求日期">
        <el-date-picker
            v-model="productionOrderForm.requestDate"
            type="date"
            placeholder="需求日期"
            :size="size"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户编码"
                        prop="customerCode"
                        v-if="productionOrderForm.productionOrderSource === 1">
            <el-input v-model="productionOrderForm.customerCode" placeholder="客户编码" clearable>
              <template #append>
                <el-button @click="showCustomerList"><el-icon><Search /></el-icon></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" v-if="productionOrderForm.productionOrderSource === 1">
            <el-input v-model="productionOrderForm.customer.name" disabled placeholder="客户名称"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-card v-if="isEdit">
      <el-tabs type="border-card">
        <el-tab-pane label="BOM组成">
          <MaterialBom  :productionOrderId="productionOrderForm.id"></MaterialBom>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <template #footer>
  <span class="dialog-footer">
    <!-- 1. 审核状态（status=2） -->
    <template v-if="productionOrderForm.status === 2">
          <el-button @click="cancelAddOrUpdate">取消</el-button>
          <el-button type="success" @click="handleAuditPass">审核通过</el-button>
          <el-button type="danger" @click="handleAuditReject">审核不通过</el-button>
    </template>

    <!-- 2. 草稿状态（status=1） -->
    <template v-else-if="productionOrderForm.status === 1">
      <el-button @click="cancelAddOrUpdate">取消</el-button>

      <!-- 新增时只显示“确认”按钮 -->
      <template v-if="!isEdit">
        <el-button type="primary" @click="submitProductionOrderForm">确认</el-button>
      </template>

      <!-- 编辑时显示“确认”和“保存” -->
      <template v-else>
        <el-button @click="confirmProductionOrderForm">确认</el-button>
        <el-button type="primary" @click="submitProductionOrderForm">保存</el-button>
      </template>
    </template>

    <!-- 3. 其他状态 -->
    <template v-else>
      <el-button @click="cancelAddOrUpdate">取消</el-button>
      <el-button v-if="!isDetail" type="primary" @click="submitProductionOrderForm">确定</el-button>
    </template>
  </span>
    </template>
  </el-dialog>
  <!-- 在模板中添加物料选择弹窗 -->
  <el-dialog v-model="productListDialogVisable" title="选择产品物料" width="80%">
    <ProductList @select-product="handlerSelectMaterial"/>
  </el-dialog>
  <!-- 添加客户选择弹窗 -->
  <el-dialog v-model="customerListDialogVisable" title="选择客户" width="80%">
    <CustomerList @select-customer="handlerSelectCustomer"/>
  </el-dialog>
</template>

<script setup>
// 导入必须的内容
import {ref,onMounted} from "vue";
import {ElMessage,ElMessageBox} from "element-plus";
//导入编写的production-order.js对应的API
import {
  getProductionOrderList,
  getAutoCode,
  queryByCode,
  addProductionOrder,
  deleteProductionOrder,
  updateProductionOrder,
  batchDeleteProductionOrder
} from "@/api/production-order.js";
// 导入字典相关的API
import {getDictDataList} from "@/api/dictData.js";
import {deleteWorkflowProduct, getWorkflowProductById} from "@/api/workflowProduct.js";
import {getProcessList} from "@/api/process.js";
// 导入物料选择组件
import ProductList from "@/views/pro/workflow/product-list.vue";
import {getMaterialByCode} from "@/api/material.js";
//导入客户选择组件
import CustomerList from "@/views/base-data/customer/customer-list.vue"
import {getCustomerByCode} from "@/api/customer.js";
//导入子组件
import MaterialBom from "@/views/pro/production-order/material-bom.vue";
// ----- 属性声明 ↓
// 绑定搜索表单的数据
const searchForm = ref({
  productionOrderCode:"",
  productionOrderName:"",
  material:{code:"",name:""},
  status:"",
  productionOrderSource:"",
  customer:{code:"",name:""},
  productionOrderType:"",
})

const productionOrderTypeList = ref([])
const productionOrderTypeContent = ref([])
const statusList = ref([])
const statusContent = ref([])
// 弹窗的标题
const dialogTitle = ref('');
// 弹窗标记
const addOrUpdateDialogVisable = ref(false);
// 编辑标记
const isEdit = ref(false);
//审核标记
const isReview = ref(false);
//审核弹窗
const reviewDialogVisable = ref(false);
// 新增/编辑表单的数据绑定对象
const productionOrderForm = ref({
  id:'',
  productionOrderCode:'',
  productionOrderName:'',
  productionOrderSource:'',
  productionOrderType:'',
  orderCode:'',
  materialCode:'',
  material:{unit:{}},
  productionOrderQuantity:'',
  customerCode:'',
  customer:{},
  requestDate:'',
  status: ''
})
// 是否自动生成编号标记
const isAutoCode = ref(false);
// 是否是显示详情的标记
const isDetail = ref(false);

// 保存工单类型字典列表
const productionOrderTypeDictDataList = ref([]);
// 保存工单状态点列表
const productionOrderStatusDictDataList = ref([]);
//保存查询的列表数据
const productionOrderList =  ref([]);
//物料列表数据
const productListDialogVisable = ref(false);
//客户列表数据
const customerListDialogVisable = ref(false);
// 分页相关数据
const pagination = ref({
  currentPage:1,
  pageSize:10,
  total:0
})
//展现物料页面
const showMaterialList = ()=>{
  productListDialogVisable.value = true;
  console.log("???")
}
//展现客户页面
const showCustomerList = ()=>{
  customerListDialogVisable.value = true;
}
// 工单列表数据（加载常见的工单列表）
const localProductionOrderList = ()=>{
  //调用我们申明的API
  getProductionOrderList(pagination.value.currentPage,pagination.value.pageSize,searchForm.value).then(res=>{
    productionOrderList.value = res.data.list;
    pagination.total = res.data.total;
  })
}


// ----- 属性声明 ↑
// -- 函数声明 ↓
const loadProductionOrderStatusDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_STATUS"}).then(res=>{
    productionOrderStatusDictDataList.value = res.data.records;
  })
}

// 加载工单类型字典的函数
const loadProductOrderDictDataList=()=>{
  getDictDataList({dictType:"PRODUCTION_ORDER_TYPE"}).then(res=>{
    productionOrderTypeDictDataList.value = res.data.records;
  })
}

//添加物料选择处理函数
const handlerSelectMaterial  = (materialCode)=>{
  getMaterialByCode(materialCode).then(res=>{
    console.log(res);
    productionOrderForm.value.material = res.data
    productionOrderForm.value.materialCode = materialCode
    productListDialogVisable.value = false;
  })
}
//添加客户选择处理函数
const handlerSelectCustomer = (customerCode)=>{
  getCustomerByCode(customerCode).then(res=>{
    console.log(res);
    productionOrderForm.value.customer = res.data
    productionOrderForm.value.customerCode = customerCode
    customerListDialogVisable.value = false;
  })
}
//草稿确认提交
const confirmProductionOrderForm = ()=>{
//
  const flag=ref(false);
//productionOrderForm.value.status=2;
let subObj = {...productionOrderForm.value}
  subObj.status = 2;
  updateProductionOrder(subObj).then(res => {
    if (res.code === 200) {
      flag.value=true;
      ElMessage.success('确认提交');
      // 3. 关闭弹窗并刷新列表
      cancelAddOrUpdate();


      handleSearch();

    } else {
      ElMessage.error(res.msg || '提交失败');
    }
  })
}
//审核通过提交
const handleAuditPass = () => {
  // 1. 先将状态设置为3（审核通过）
  //productionOrderForm.value.status = 3;
  let subObj = {...productionOrderForm.value}
  subObj.status = 3;
  // 2. 提交更新
  updateProductionOrder(subObj).then(res => {
    if (res.code === 200) {
      ElMessage.success('审核通过');
      // 3. 关闭弹窗并刷新列表
      cancelAddOrUpdate();
      handleSearch();
    } else {
      ElMessage.error(res.msg || '审核失败');
    }
  })
};
//审核未通过提交
const handleAuditReject = ()=>{
  productionOrderForm.value.status = 1;
  updateProductionOrder(productionOrderForm.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('审核不通过');
      // 3. 关闭弹窗并刷新列表
      cancelAddOrUpdate();
      handleSearch();
    } else {
      ElMessage.error(res.msg || '审核失败');
    }
  })
};
// 提交新增/编辑表单的按钮事件
const submitProductionOrderForm = ()=>{
  // 这里应该调用API提交数据
  if (isEdit.value) {
    updateProductionOrder(productionOrderForm.value).then(res => {
      if (res.code === 200){
        ElMessage.success('编辑工单成功');
        cancelAddOrUpdate();
        handleSearch();
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    addProductionOrder(productionOrderForm.value).then(res => {
      productionOrderForm.value.status = 1;
      if (res.code === 200){
        ElMessage.success('新增工单成功');
        cancelAddOrUpdate();
        handleSearch();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }

}
// 取消新增/编辑的事件
const cancelAddOrUpdate = ()=>{
  addOrUpdateDialogVisable.value = false;
  // 重置表单
  Object.assign(productionOrderForm, {
    id: '',
    productionOrderCode: '',
    productionOrderName: '',
    productionOrderSource: '',
    productionOrderType: '',
    orderCode: '',
    materialCode: '',
    material: { unit: {} },
    productionOrderQuantity: '',
    customerCode: '',
    customer: {},
    requestDate: '',
    status: ''
  })
}
// 自动生成编号的事件
const autoCode = ()=>{

}
//审核按钮事件
const handleReview = (row)=>{
  dialogTitle.value = '审核工单'
  //要有表数据
  queryByCode(row.id).then(res=> {
    const data = res.data || {};
    productionOrderForm.value = {
      ...data,
      customer: data.customer || {},
      material: data.material ? {
        ...data.material, unit: data.material.unit || {}
      } : {unit: {}}
    };
  })
    getDictDataList({dictType: 'PRODUCTION_ORDER_STATUS', pageNum: 1, pageSize: 1000})
        .then(res=>{
          productionOrderTypeList.value = res.data.list;
          productionOrderTypeContent.value = [];
          res.data.records.forEach(item=>{
            productionOrderTypeContent.value.push(item.dictLabel + ':' + item.remark)
          })
        })
    getDictDataList({dictType: 'PRODUCTION_ORDER_TYPE', pageNum: 1, pageSize: 1000})
        .then(res=>{
          statusList.value = res.data.list;
          statusContent.value = [];
          res.data.records.forEach(item=>{
            statusContent.value.push(item.dictLabel + ':' + item.remark)
          })
        })
    addOrUpdateDialogVisable.value = true;
}
//编辑按钮事件
const handleEdit = (row)=>{
  dialogTitle.value = '编辑工单';
  isEdit.value = true;
  queryByCode(row.id).then(res=>{
    const data = res.data || {};
    productionOrderForm.value = {
      ...data,
      customer: data.customer || {},
      material: data.material ? {
        ...data.material,unit: data.material.unit || {}
      } : {unit: {}}
    };
    /*const data = res.data;
    productionOrderForm.value = {
      id: data.id,
      productionOrderCode: data.productionOrderCode,
      productionOrderName: data.productionOrderName,
      productionOrderSource: data.productionOrderSource,
      productionOrderType: data.productionOrderType,
      orderCode: data.orderCode,
      materialCode: data.materialCode,
      productionOrderQuantity: data.productionOrderQuantity,
      customerCode: data.customerCode,
      requestDate: data.requestDate,
      status: data.status,
      qrCodeUrl: data.qrCodeUrl,
      statusDictData: data.statusDictData,
      typeDictData: data.typeDictData,
      customer: data.customer || {},
      material: data.material || { unit: {} }
    };*/
  })
  /*queryByCode(row.id).then(res=>{
    productionOrderForm.id = res.data.id
    productionOrderForm.productionOrderCode = res.data.productionOrderCode
    productionOrderForm.productionOrderName = res.data.productionOrderName
    productionOrderForm.productionOrderSource = res.data.productionOrderSource
    productionOrderForm.productionOrderType = res.data.productionOrderType
    productionOrderForm.orderCode = res.data.orderCode
    productionOrderForm.materialCode = res.data.materialCode
    productionOrderForm.productionOrderQuantity = res.data.productionOrderQuantity
    productionOrderForm.customerCode = res.data.customerCode
    productionOrderForm.requestDate = res.data.requestDate
    productionOrderForm.status = res.data.status
    productionOrderForm.qrCodeUrl = res.data.qrCodeUrl
    productionOrderForm.statusDictData = res.data.statusDictData
    productionOrderForm.typeDictData = res.data.typeDictData
    productionOrderForm.customer = res.data.customer
    productionOrderForm.material = res.data.material
  });*/
  getDictDataList({dictType: 'PRODUCTION_ORDER_STATUS', pageNum: 1, pageSize: 1000})
      .then(res=>{
        productionOrderTypeList.value = res.data.list;
        productionOrderTypeContent.value = [];
        res.data.records.forEach(item=>{
          productionOrderTypeContent.value.push(item.dictLabel + ':' + item.remark)
        })
      })
  getDictDataList({dictType: 'PRODUCTION_ORDER_TYPE', pageNum: 1, pageSize: 1000})
      .then(res=>{
        statusList.value = res.data.list;
        statusContent.value = [];
        res.data.records.forEach(item=>{
          statusContent.value.push(item.dictLabel + ':' + item.remark)
        })
      })
  addOrUpdateDialogVisable.value = true;
}
// 新增工单的按钮事件
const handleAdd = ()=>{
  dialogTitle.value = '新增工单';
  isEdit.value = false
  productionOrderForm.value = {
    id: '',
    productionOrderCode: '',
    productionOrderName: '',
    productionOrderSource: '',
    productionOrderType: '',
    orderCode: '',
    materialCode: '',
    material: {unit: {}},
    productionOrderQuantity: '',
    customerCode: '',
    customer: {},
    requestDate: '',
    status: 1
  }
  /*//重置表单
  Object.assign(productionOrderForm, {
    id: '',
    productionOrderCode: '',
    productionOrderName: '',
    productionOrderSource: '',
    productionOrderType: '',
    orderCode: '',
    materialCode: '',
    material: { unit: {} },
    productionOrderQuantity: '',
    customerCode: '',
    customer: {},
    requestDate: '',
    status: 1
  })*/
  getDictDataList({dictType: 'PRODUCTION_ORDER_STATUS', pageNum: 1, pageSize: 1000})
      .then(res=>{
        productionOrderTypeList.value = res.data.list;
        productionOrderTypeContent.value = [];
        res.data.records.forEach(item=>{
          productionOrderTypeContent.value.push(item.dictLabel + ':' + item.remark)
        })
      })
  getDictDataList({dictType: 'PRODUCTION_ORDER_TYPE', pageNum: 1, pageSize: 1000})
      .then(res=>{
        statusList.value = res.data.list;
        statusContent.value = [];
        res.data.records.forEach(item=>{
          statusContent.value.push(item.dictLabel + ':' + item.remark)
        })
      })
  addOrUpdateDialogVisable.value = true;
  productionOrderForm.value.status = 1;

}

// 改变了每页大小的事件
const handleSizeChange =(pageSize)=>{
  pagination.value.pageSize = pageSize;
  handleSearch();
}
// 改变页面的事件  翻页事件
const handleCurrentChange =(newPage)=>{
  pagination.value.currentPage = newPage;
  handleSearch();
}
// 搜索数据的事件
const handleSearch=()=> {
  // 调用查询的接口查询数据,初始化参数对象
  let params = {
    productionOrderCode: searchForm.value.productionOrderCode,
    productionOrderName: searchForm.value.productionOrderName,
    materialCode: searchForm.value.material.code,
    materialName: searchForm.value.material.name,
    status: searchForm.value.status,
    productionOrderSource: searchForm.value.productionOrderSource,
    customerCode: searchForm.value.customer.code,
    customerName: searchForm.value.customer.name,
    productionOrderType: searchForm.value.productionOrderType,
    // 添加分页参数
    pageNum: pagination.value.currentPage,
    pageSize: pagination.value.pageSize
  };
  getProductionOrderList(params).then(res=>{
    productionOrderList.value = res.data.list;
    pagination.value.total = res.data.total;
  })
}
// 删除数据的事件
const handleDelete = (row)=>{
  ElMessageBox.confirm(
      `确定要删除选中的 ${row.productionOrderName} 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    deleteProductionOrder(row.id).then(res=>{
      if (res.code == 200){
        ElMessage.success("删除完成");
        handleSearch();
        getProductionOrderList();
      }else{
        ElMessage.error("删除失败")
      }
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
// -- 函数声明 ↑
onMounted(()=>{
  loadProductionOrderStatusDictDataList();
  loadProductOrderDictDataList();
  handleSearch();
})


</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>